<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESD看板</title>
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css">
    <style>
        body {
            margin: auto;
            background-color: #030212;
        }
        .el-header{
            background-image: url('/backend/images/TopImg.png'); /* 替换为你的图片路径 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
            background-repeat: no-repeat; /* 背景图片不重复 */
        }
        .devices {
            box-sizing: border-box;
            border: solid #101129;
            border-image: url('/backend/images/border.png') 51 38 21 132;
            border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        }
        .main {
            min-height: 85vh;
            display: flex;
        }

        .pic{
            margin-top: 1px;
            margin-left: 1px;
            position: absolute;
        }
        .position{
            position: absolute;
            align-items : center ;
            z-index: 10;
            /* 垂直并排居中显示 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .channelTypeMiss{
            background-color: #969a9b;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
        .channelTypeNormal{
            background-color: #2cc203;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
        .channelTypeError{
            background-color: #f82d1f;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
        .channelTypeStandBy{
            background-color: #888621;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
        .user_skills{
            width: 92%;
            margin: auto;
        }
        /*最外层透明*/
        .el-table, .el-table__expanded-cell{
            background-color: transparent;
        }
        /* 表格内背景颜色 */
        .el-table th,
        .el-table tr,
        .el-table td {
            background-color: transparent;
        }
        /*去除底部白线*/
        .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 100vh; text-align: center;">
            <el-header height="8vh" style="display: flex;justify-content: center;align-items: center;">
                <div class="title" style="display: flex;justify-content: center;align-items: center;">
                    <div style="height: 8vh;">
                        <img :src="logoPath" style="height: 8vh;">
                    </div>
                    <div>
                        <strong style="color: aliceblue; font-size: 4vh;">{{line}}ESD终端看板</strong>
                    </div>
                </div>
            </el-header>
            <el-main>
                <div class="time" id="showTime" style="color: aliceblue; position: absolute; right: 3vw; margin-top: -7vh; font-size: 1vw;">
                    {{currentTimeStr}}
                </div>
                <el-row>
                    <el-col :span="16">
                        <div class="main devices" id="main">
                            <img v-for="(item , index) in imgList" :id="item.id" :src="item.src" class="pic"
                                 :style="item.style"/>
                            <span v-for="(item , index) in positionList" :style="item.style"
                                  :id="item.id" class="position" v-if="item.enabled">
                                <span style="color: aliceblue;font-size: 10px;">{{item.detail}}</span>
                                <span>
                                    <img :src="getChannelImg(item.channelType)" :class="getChannelClass(item.status)">
                                </span>
                                <span style="color: aliceblue;font-size: 10px;">{{item.positionName}}</span>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="8" style="text-align: center;">
                        <div class="statistics-child" style="width: 100%; height: 3vh; margin-top: 5vh;text-align: center;">
                            <span style="color: aliceblue; font-size: 3vh;">ESD通道数据统计</span>
                        </div>
                        <div class="statistics-child" style="width: 100%; margin-top: 1vh;text-align: center;">
                            <el-table
                                    class="user_skills"
                                    :data="analysisList"
                                    :header-cell-style="{background: 'transparent', color: 'aliceblue' }"
                                    :cell-style="addStyle"
                            >
                                <el-table-column
                                        align="center"
                                        prop="channelName"
                                        label="通道类型">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="icon"
                                        label="图标">
                                    <template slot-scope="scope" v-if="scope.$index!=anDataLength">
                                        <img :src="scope.row.icon" style="border-radius: 2px; background-color: #838181 ;width: 20px; height: 20px;"/>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="normal"
                                        label="正常">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="error"
                                        label="异常">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="miss"
                                        label="失联">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="standBy"
                                        label="待机">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="total"
                                        label="总计">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="statistics-child" id="pieDiv" style="width: 100%; height: 25vh; margin-top: 5vh;">

                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
    <script src="/backend/plugins/vue/vue.js"></script>
    <script src="/backend/plugins/axios/axios.js"></script>
    <script src="/backend/plugins/echart/echarts.min.js"></script>
    <script src="/backend/plugins/element-ui/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgList: [],
                line: null,
                positionList : [],
                positionClock : null ,
                checkGatewayClock : null ,
                setTimeClock: null ,
                analysisList : [],
                logoPath: null,
                currentTimeStr: null ,
                anDataLength: 0 
            },
            created() {
                let urlParams = new URLSearchParams(window.location.search);
                let queryParam = urlParams.get("line");
                if (queryParam !== null && queryParam !== '') {
                    this.line = queryParam;
                }
                axios.get("/line/getLogoPath").then((res) => {
                    this.logoPath = res.data;
                });
                if (this.line !== null && this.line !== '') {
                    axios.get("/line/getModule?lineName=" + this.line).then((res) => {
                        if (res.data.code === 0) {
                            this.imgList = res.data.data;
                        }
                    });
                }else {
                    this.$message.error("您还未选择任何要设置的生产线！！");
                }
                this.positionClock = window.setInterval(function(){
                    axios.get("/line/getCurrentStatus?lineName=" + app.line).then((res) => {
                        if (res.data.code === 0) {
                            app.positionList = res.data.data.positionList;
                            app.analysisList = res.data.data.analysisList;
                            app.anDataLength = app.analysisList.length - 1 ;
                            let ecDemo = echarts.init(document.getElementById("pieDiv"));
                            let pieData = [
                                {
                                    name: '正常',
                                    value: res.data.data.totalMap.normal,
                                    itemStyle: {color: '#2cc203'}
                                },
                                {
                                    name: '异常',
                                    value: res.data.data.totalMap.error,
                                    itemStyle: {color: '#f82d1f'}
                                },
                                {
                                    name: '失联',
                                    value: res.data.data.totalMap.miss,
                                    itemStyle: {color: '#5c5a5a'}
                                },
                                {
                                    name: '待机',
                                    value: res.data.data.totalMap.standBy,
                                    itemStyle: {color: '#888621'}
                                }
                            ];
                            let option = {
                                series : [
                                    {
                                        type : 'pie',
                                        data : pieData ,
                                        label: {
                                            show : true ,
                                            color: 'aliceblue',
                                            formatter: function (args) {
                                                return args.data.name + ': ' + args.percent + '%';
                                            }
                                        },
                                        roseType : 'radius'
                                    }
                                ]
                            }
                            ecDemo.setOption(option);
                        };
                    });
                }, 3000);
                this.checkGatewayClock = window.setInterval(function(){
                    let urlParams = new URLSearchParams(window.location.search);
                    let queryParam = urlParams.get("line");
                    axios.get("/gateway/checkLineGateway?lineName=" + queryParam).then((res) => {
                        if (res.data.code === 0) {
                            let serverIps = "" ;
                            let gatewayStatus = res.data.data;
                            let index = 0 ;
                            for (let i = 0; i < gatewayStatus.length; i++) {
                                if (!gatewayStatus[i].connected){
                                    if (index === 0){
                                        serverIps = serverIps + gatewayStatus[i].serverIp;
                                    }else{
                                        serverIps = serverIps + "、" + gatewayStatus[i].serverIp;
                                    }
                                    index++ ;
                                }
                            }
                            if (index > 0){
                                app.$message({
                                    type: 'error',
                                    message: "网关: " + serverIps + " 的网关出现异常！！"
                                });
                            }
                        }
                    }).catch((err) => {
                        app.$message({
                            type: 'error',
                            message: "服务器出现异常！！"
                        });
                    });

                }, 3000);
                this.setTimeClock = window.setInterval(function(){
                    let currentTime = new Date();
                    // 格式化年份
                    const year = currentTime.getFullYear();
                    // 格式化月份
                    const month = (currentTime.getMonth() + 1).toString().padStart(2, '0'); // 使用padStart补齐前导零
                    // 格式化日期
                    const day = currentTime.getDate().toString().padStart(2, '0');
                    const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                    app.currentDateStr = year + "年" + month + "月" + day + "日  ";
                    let hours = currentTime.getHours();
                    let minutes = currentTime.getMinutes();
                    let seconds = currentTime.getSeconds();
                    hours = hours < 10 ? '0' + hours : hours;
                    minutes = minutes < 10 ? '0' + minutes : minutes;
                    seconds = seconds < 10 ? '0' + seconds : seconds;
                    // 这里 this指向的是window, 所以要使用 app
                    app.currentTimeStr = year +"/" + month +"/" + day + " " + days[currentTime.getDay()] + "  " + hours + ":" + minutes + ":" + seconds;
                }, 1000);
            },
            methods: {
                getChannelClass(status){
                    if (status === '失联'){
                        return "channelTypeMiss" ;
                    }else if (status === '正常'){
                        return "channelTypeNormal" ;
                    }else if (status === '异常'){
                        return "channelTypeError" ;
                    }else{
                        return "channelTypeStandBy" ;
                    }
                },
                getChannelImg(channelTypeName){
                    if (channelTypeName === 'ESD手环') {
                        return "../../images/SVG/WH0.svg";
                    } else if (channelTypeName === '设备接地') {
                        return "../../images/SVG/EM0.svg";
                    } else if (channelTypeName === '台垫接地') {
                        return "../../images/SVG/RR0.svg";
                    } else if (channelTypeName === '离子风扇'){
                        return "../../images/SVG/EN0.svg";
                    }else if (channelTypeName === '温度计'){
                        return "../../images/SVG/TE1.svg";
                    }else if (channelTypeName === '湿度计'){
                        return "../../images/SVG/HU0.svg";
                    }else if (channelTypeName === '尘埃粒子'){
                        return "../../images/SVG/CL1.svg";
                    }
                },
                addStyle({row,column,rowIndex,columnIndex}){
                    if(columnIndex === 1){
                        return ' color:#969a9b';
                    }
                    if(columnIndex === 2){
                        return ' color: #2cc203';
                    }
                    if(columnIndex === 3){
                        return ' color: #f82d1f';
                    }
                    if(columnIndex === 4){
                        return ' color: #969a9b';
                    }
                    if(columnIndex === 5){
                        return ' color: #888621';
                    }
                    if(columnIndex === 6){
                        return ' color: #969a9b';
                    }
                }
            },
            mounted() {
            },
            beforeDestroy() {
                window.clearInterval(this.positionClock);
                window.clearInterval(this.checkGatewayClock);
                window.clearInterval(this.setTimeClock);
            }
        });
    </script>
</body>
</html>